<!DOCTYPE html><html>
<head>
<title>Test game like</title>
<meta name = "viewport" content = "user-scalable=no, width=device-width">

<style>
body {
    margin:0 auto;
}
.sjs {
    background:#f1f4fe;
    border:1px #333 solid;
}
</style>
</head>
<body>

<p>Sprite.js, game test. <a href="https://github.com/batiste/sprite.js">Github project page</a></p>

</body>
<script src="../vendors/touch.js"></script>
<script src="../sprite.js"></script>
<script src="../lib/collision.js"></script>
<script>

window.onload = function() {

    var game_height = 478;
    var game_width = 318;
    var scene = sjs.Scene({w:game_width, h:game_height});
    var layer = scene.Layer('front', {useCanvas:false});
    sjs.debug = true;

    var plateforms = [];
    var mplateforms = [];

    var bottom = layer.Sprite('img/ground.png');
    bottom.move(0, game_height - 20);
    bottom.setW(game_width);

    plateforms.push(bottom);

    var p = layer.Sprite('img/ground.png');
    p.move(150, 400);
    p.setW(60);
    p.rotate(-0.2);
    p.xv = 1.2;

    plateforms.push(p);
    mplateforms.push(p);


    var p = layer.Sprite('img/ground.png');
    p.move(150, 320);
    p.setW(50);
    p.rotate(0.2);
    p.xv = 1.5;

    plateforms.push(p);
    mplateforms.push(p);

    var p = layer.Sprite('img/ground.png');
    p.move(15, 250);
    p.setW(50);
    p.xv = 0.5;

    plateforms.push(p);
    mplateforms.push(p);

    var p = layer.Sprite('img/ground.png');
    p.move(180, 180)
    p.setW(30);
    p.xv = 2;

    plateforms.push(p);
    mplateforms.push(p);


    var p = layer.Sprite('img/ground.png');
    p.move(180, 100);
    p.setW(30);
    p.xv = 1.3;

    plateforms.push(p);
    mplateforms.push(p);


    var player = layer.Sprite('img/character.png');
    player.move(20, 390);
    player.size(23, 51);
    player.setYOffset(3);

    var input  = scene.Input();

    var cycle = scene.Cycle([[3, 3, 1],
                               [33, 3, 1],
                               [63, 3, 2],
                               [93, 3, 2],
                               [123, 3, 2],
                               [153, 3, 2],
                               [183, 3, 2]]);
    cycle.addSprite(player);

    var xv = 0, yv = 0;

    function paint() {

        var x = player.x + player.w/2;
        var y = player.y + player.h - 1;
        var has_contact = y > window.innerHeight;
        if(!has_contact) {
            for(var i=0; i < plateforms.length; i++) {
                var p = plateforms[i];
                has_contact = p.isPointIn(x, y);
                if(has_contact) {
                    if(p.xv)
                        player.setX(player.x + p.xv);
                    break;
                }
            }
        }

        for(var i=0; i < mplateforms.length; i++) {
            var p = mplateforms[i];
            if((p.x + p.xv + p.w / 2) > game_width || (p.x + p.w / 2) < 0) {
                p.xv = -p.xv;
            }
            p.move(p.xv, 0);
        }

        if((input.keyboard.up || input.keyboard.space) && yv >= 0) {
            if(has_contact)
                yv = -7;
            else
                yv = yv - 0.1;
        }

        yv = yv + 0.3;

        if(!input.keyboard.left && !input.keyboard.right)
            xv = xv / 1.3;

        if(input.keyboard.left) {
            xv = Math.max(-3.5, xv-1);
            player.scale(1, 1);
        }
        if(input.keyboard.right) {
            xv = Math.min(3.5, xv+1);
            player.scale(-1, 1);
        }

        if(yv>0 && has_contact)
            yv = 0;

        player.move(xv, yv);
        if(player.x < 0)
            player.setX(0);
        if(player.x > game_width - 20)
            player.setX(game_width - 20);
        for(var i=0; i < plateforms.length; i++) {
            plateforms[i].update();
        }
        bottom.update();
        player.update();
        if(input.arrows())
            cycle.next(ticker.lastTicksElapsed);
        else
            cycle.reset();
    };

    var ticker = scene.Ticker(25, paint);
    ticker.run();

};
</script>
</html>
